<template>
    <div class="main-title" :class="{'bg-white':hasBg,'line-bottom':hasLine}">
      <span class="title"><slot></slot></span>
      <router-link class="more" :to="moreLink" v-if="moreLink">{{rightText}}</router-link>
    </div>
</template>

<script>
export default {
  name: 'Title',
  props:{
      hasBg : {
          type:Boolean,
          default:false
      },
      hasLine : {
          type:Boolean,
          default:false
      },
      moreLink : {
          type: String,
          default: ''
      },
      rightText : {
          type : String,
          default : '更多'
      }

  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'
.main-title
  padding: $spacing $spacing $spacing $spacing + 10
  font-size: $font-lg
  color: $text-dark
  position: relative
  display: flex
  align-items: center
  justify-content: space-between
  line-height: 1
  &:after
    content: ""
    left-middle($spacing)
    width: 5px
    height: 16px
    border-radius: 3px;
    background-color: $primary
    z-index: 1
  .title
    flex: 1
    position: relative
    font-weight: bold
    font-size: inherit
  .more
    font-size: $font-sm
    color: $text-light
    position: relative
    padding-right: 10px
    &:after
      content: ""
      position: absolute
      right: 0
      top: 50%
      margin-top: -5px
      line-height: 1
      width: 8px
      height: 8px
      border: solid #afafaf
      border-width: 2px 2px 0 0
      transform: rotate(45deg) scale(0.7)

</style>
